<template>
  <div class="music-gallery-wrapper">
    <div class="music-gallery" v-bind:onload="loadMusicList()" :key="status">
      <MusicItem v-for="msc in musicList"
        v-bind:music-picture-url="msc[1]"
        v-bind:music-name="msc[0]"
        v-bind:music-data="msc">
      </MusicItem>
    </div>
  </div>
</template>

<script>
import MusicItem from '@/components/MusicItem.vue'
const axios = require('axios').default;

export default {
  name: 'MusicGallery',
  components: {
    MusicItem: MusicItem
  },
  data: function() {
    return {
      status: "INIT",
      musicList: [
        ["Shadow", "https://one.oss.monkeyhbd.cn/mokey-land.png", ""],
        ["Shadow", "https://one.oss.monkeyhbd.cn/mokey-land.png", ""],
        ["Shadow", "https://one.oss.monkeyhbd.cn/mokey-land.png", ""],
      ]
    };
  },
  methods: {
    loadMusicList: function() {
      var target = this.musicList;
      var th = this;

      var promise = axios({
        method: 'get',
        url: 'http://api.monkeyhbd.cn:2003/music-gallery-list'
      });

      promise.then(function(res) {
        target.length = 0;
        Array.prototype.push.apply(target, res.data.musicList);
        console.log(res.data.musicList);
        th.status = "OK";
      });
    }
  }
}
</script>

<style scoped>
.music-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
